<template>
  <div class="container" @mousedown="mouseDown">
    <h1>ToDoList</h1>

    <h3>
      共有<span class="text-primary">{{ lists.length }}</span
      >个任务，其中<span class="text-success">{{ finished.length }}</span
      >个已完成
    </h3>

    <h4>未完成的列表：</h4>
    <ul class="list-group">
      <template v-for="(item, index) in lists">
        <li
          class="list-group-item d-flex justify-content-between"
          :key="index"
          v-if="!item.checked"
        >
          <div class="form-group form-check mb-0">
            <input
              v-model="item.checked"
              type="checkbox"
              class="form-check-input"
              @click="() => (item.checked = !item.checked)"
            />
            <label
              class="form-check-label"
              v-if="!item.isEdit"
              @dblclick="showEdit(item, index)"
              >{{ item.name }}</label
            >
            <label class="form-check-label" :for="'item-' + index" v-else
              ><input type="text" v-model="editValue" ref="myInput"
            /></label>
          </div>
          <!-- 删除的按钮 -->
          <button
            type="button"
            class="close"
            aria-label="Close"
            @click="remove(index)"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </li>
      </template>
    </ul>

    <h4>已完成的列表：</h4>
    <ul class="list-group">
      <li
        class="list-group-item"
        v-for="(item, index) in finished"
        :key="'finished-' + index"
      >
        <div class="form-group form-check">
          <input
            v-model="item.checked"
            type="checkbox"
            class="form-check-input"
            :id="'finished-' + index"
            disabled
          />
          <label class="form-check-label" :for="'finished-' + index">{{
            item.name
          }}</label>
        </div>
      </li>
    </ul>

    <h4>添加新的任务：</h4>
    <div class="form-group">
      <input
        type="text"
        id="add"
        class="form-control"
        placeholder="添加新的任务"
        v-model="value"
        @keydown.enter="add"
      />
    </div>

    <button type="button" class="btn btn-primary btn-lg btn-block" @click="add">
      确定添加
    </button>
  </div>
</template>

<script>
import { ref, computed, reactive, toRefs } from "vue";

export default {
  name: "Home",
  setup() {
    const myInput = ref(null);
    let editIndex = 0;
    // 进行项目拆分：
    // 1、加入checkbox => checked
    // 2、checked => finished
    // 3、添加item数据结构：name,checked,isEdit

    // 4、双击编辑
    const showEdit = (item, index) => {
      editIndex = index;
      item.isEdit = true;
      state.editValue = item.name;
    };
    // 鼠标点击其他部分完成修改
    const mouseDown = (e) => {
      if (myInput.value && e.target !== myInput.value) {
        state.lists[editIndex] = {
          name: state.editValue,
          checked: false,
          isEdit: false,
        };
      }
    };
    // 5、删除功能
    const remove = (index) => {
      state.lists.splice(index, 1);
    };

    // 6、添加任务
    const add = () => {
      state.lists.push({
        name: state.value,
        checked: false,
        isEdit: false,
      });
      state.value = "";
    };

    const state = reactive({
      value: "",
      editValue: "",
      lists: [
        {
          name: "1",
          isEdit: false,
          checked: false,
        },
        {
          name: "2",
          isEdit: false,
          checked: false,
        },
        {
          name: "3",
          isEdit: false,
          checked: false,
        },
      ],
      finished: computed(() =>
        state.lists.filter((item) => item.checked === true)
      ),
      add,
      showEdit,
      mouseDown,
      myInput,
      remove,
    });

    return toRefs(state);
  },
};
</script>

<style scoped>
h4 {
  margin: 20px 0 20px 0;
}
</style>
